<template>
	<view>
		<!-- 可滚动视图 nav导航列表-->
		<scroll-view :scroll-x="true">
			<!-- view.scroll-nav>view.item>view.title+view.current -->
			<slot name="top"></slot>
			<view class="scroll-nav">
				<view class="item" v-for="(item,index) in scrollnav" 
				:key="index"
				@click="toscrollNav"
				:current="current"  
				:data-index="index"
				>
					<view class="title" :class="current==index?'fontweiht':''" :style="current==index?titleStyle:''">
						{{item.name}}
					</view>
					<view class="current" :style="current==index?currentStyle:''"></view>
				</view>
			</view>
			<slot name="bottom"></slot>
		</scroll-view>
		<!--  -->
	</view>
</template>

<script>
	export default {
		props: {
			scrollnav: {
				type: Array,
				default: []
			},
			// 
			currentcolor: {
				type: String,
				default: '#000'
			},
			// 坐标位置
			current: {
				// 当前样式
				default: 0
			},
			//标题 当前选中的样式
			// titleStyle: {
			// 	type:Array,
			// 	default:[]
			// },
			//标题下current块 当前选中的样式
			// currentStyle: {
			// 	type:Array,
			// 	default:[]
			// }
		},
		name:"FatFatMeng-scroll-nav",
		data() {
			return {
				
			};
		},
		methods: {
			// 点击nav控制下的swiper展示
			toscrollNav(e) {
				console.log("scrollnav组件")
				let index = e.currentTarget.dataset.index
				console.log('scrollnav当前位置：' + index);//当前位置
				this.$emit("scrollNav",index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-nav {
		display: flex;
		//justify-content: center;
		align-items: center;
		//width: 690rpx;		
		view {
			display: flex;
		}
		.item {
			height: 80rpx;
			line-height: 80rpx;
			//justify-content: center;
			align-items: center;
			flex-direction: column-reverse;
			width: 100rpx; 
			.title {
				height: 80rpx;
				font-size: 32rpx;
				width: 100rpx; 
				position: relative;
				justify-content: center;
			}
			.fontweiht {
				font-weight: 600;
			}
			.current {
				height: 8rpx;
				width: 44rpx;
				border-radius: 4rpx;
				position: absolute;
			}
		}
		
	}
	
	
	
		
		
	

</style>
